<div class="home-page" *ngIf="blogPageLayout$ | async as listConfig">

    <div class="banner" *showAuthed="false">
        <div class="container">
            <h1 class="logo-font">conduit</h1>
            <p>A place to share your <i>Angular</i> knowledge.</p>
        </div>
    </div>

    <div class="container page">
        <div class="row">

            <div class="col-md-9">
                <div class="feed-toggle">
                    <ul class="nav nav-pills outline-active">
                        <li class="nav-item">
                            <a class="nav-link" [ngClass]="{'active': listConfig.type === 'feed'}" (click)="setListTo('feed')">
                 Your Feed
              </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" [ngClass]="{'active': listConfig.type === 'all' && !listConfig.filters.tag}" (click)="setListTo('all')">
                 Global Feed
              </a>
                        </li>
                        <li class="nav-item" [hidden]="!listConfig.filters.tag">
                            <a class="nav-link active">
                <i class="ion-pound"></i> {{ listConfig.filters.tag }}
              </a>
                        </li>
                    </ul>
                </div>

                <jhi-article-list [limit]="4"></jhi-article-list>
            </div>

            <div class="col-md-3">
                <div class="sidebar">
                    <p>Popular Tags</p>

                    <div class="tag-list">
                        <a href="javascript:void(0);" *ngFor="let tag of tags$ | async" (click)="setListTo('all', {tag: tag})" class="tag-default tag-pill">
               {{ tag }}
            </a>
                    </div>

                    <div [hidden]="tagsLoaded">
                        Loading tags...
                    </div>

                    <div [hidden]="!tagsLoaded || tags.length">
                        No tags are here... yet.
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
